<template>
	<div :id="model.id" class="counter warp">
		<el-row>
			<el-col v-if="model.data.labelValue" :span="model.data.labelWidth">
				<label><font v-if="model.data.required" class="color-danger mr10">*</font>{{model.data.labelValue}}</label>
			</el-col>
			<el-col :span="model.data.labelValue ? (24 - model.data.labelWidth) : 24">
				<el-input-number class="w100" 
					v-model="inputValue"
					:placeholder="model.data.placeholder"
					:clearable="model.data.clearable"
					:disabled="model.data.disabled"
					:size="model.data.size"
					:name="model.data.name"
					:readonly="model.data.readonly"
					:max="model.data.max"
					:min="model.data.min"
					:step="model.data.step" 
					:step-strictly="model.data.stepStrictly"
					:precision="model.data.precision"
					:label="model.data.label"
					:controls="model.data.controls"
					:controls-position="model.data.controlsPosition"
					@change="onInputChange">
				</el-input-number>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, computed, watch } from 'vue';
	import { useStore } from '/@/store/index';
	export default {
		name: 'counter-basics',
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const store = useStore();
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
				inputValue: props.model.data.modelValue,
			});
			state.componentsFormData = computed(() => store.state.decorator.componentsFormData);
			
			const setComponentsFormData = (componentsFormData) => {
				store.dispatch('decorator/setComponentsFormData', componentsFormData);
			};
			
			const onInputChange = () => {
				state.componentsFormData[state.model.data.name] = state.inputValue;
				setComponentsFormData(state.componentsFormData);
			}
			
			onMounted(() => {
				let inputValue = state.componentsFormData[props.model.data.name];
				state.inputValue = inputValue ? inputValue : (props.model.data.modelValue ? props.model.data.modelValue : '');
				state.componentsFormData[state.model.data.name] = state.inputValue;
				setComponentsFormData(state.componentsFormData);
			})
			
			watch(() => props.model.data.modelValue, () => {
				state.inputValue = props.model.data.modelValue;
				state.componentsFormData[props.model.data.name] = state.inputValue;
				setComponentsFormData(state.componentsFormData);
			})
			
			return {
				onInputChange,
				...toRefs(state),
			};
		}
	}
</script>

<style lang="scss" scoped>
	.counter {
		position: relative;
		label {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			flex: 0 0 auto;
			font-size: var(--el-form-label-font-size);
			color: var(--el-text-color-regular);
			height: 32px;
			line-height: 32px;
			padding: 0 12px;
			box-sizing: border-box;
		}
	}
</style>